<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<%@ page import="com.wave2.shadow.misc.Constants"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Java Golf Association - Events</title>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

	<script>
		function setOrgFilter(orgName){
			$("#organizerFilter").val(orgName);
		}

		function filterTable(){
			var orgName = $("#organizerFilter").val();

			//Sample return JSON String from server for "http://localhost:8080/MavenJGA/api/event/name/chris" would be:    
			//		 {"events":[{"id":1,"name":"Chris-fest","description":"Festival of Awesomeness!","category":null,"organizer":"chris"}]}
			$.getJSON("http://localhost:8080/MavenJGA/api/event/name/" + orgName, 
			function(data) {
		    	var newRow = "";
				
		    	//remove all but the first row from the eventList table.
		    	$("#<%=Constants.ATTR_EVENTLIST%>").find("tr:gt(0)").remove();			

				//add rows back tot he eventList table based on JSON data recieved from webservice 	
			    for (var i = 0; i < data.events.length; i++) {

			    	//determine if the row is an even or odd row so you can use different css styles
				    var classname="";
					if ( ( (i+1) % 2 ) == 0){
						classname = "even";
					}
					else{
						classname = "odd";	
					}

				    //create the html string for a new table row.
			    	newRow = "<tr class='" + classname + "'>" 
			    			  	+ "<td>" 
		    			  			+ data.events[i].id
	    			  			+ "</td>" 
	    			  			+ "<td>"
	    			  				+ data.events[i].name   
	    			  			+ "</td>" 
	    			  			+ "<td>"  
	    			  				+ data.events[i].description 
	    			  			+ "</td>" 
	    			  			+ "<td>"   
	    			  			+ "<a href=\"javascript:setOrgFilter('" + data.events[i].organizer + "')\">" + data.events[i].organizer +"</a>"
	    			  				//+ data.events[i].organizer
	    			  			+ "</td>" 		    			  		
    			  			+ "<tr>";

    			  	//add the new row to the empty table.
				    $("#<%=Constants.ATTR_EVENTLIST%> tr:last").after(newRow);
				
			    }

			});
		}

	</script>
	
</head>
<body>
	<div id="container">
		<%@ include file="/includes/Navigation.html"%>

		<div id="content">
		
			<hr/><br/>
			<h3 style="text-align: center;">Filter:</h3>
			<hr/><br/>
			
			<form>
				<table>
					<tr>
						<td>
							<label for="organizerFilter">Organizer Name: </label>
							<input type="text" size="50" name="organizerFilter" id="organizerFilter" value=""/>
						</td>
						<td style="width: 20px;">
							&nbsp;
						</td>
						<td>
							<input type="button" value="submit" onclick="filterTable();"/>
						</td>
					</tr>
				</table>
			</form>
			
			<h3 style="text-align: center;">Events Listing:</h3>
			<hr/><br/>
			
			<display:table id="<%=Constants.ATTR_EVENTLIST%>" name="<%=Constants.ATTR_EVENTLIST%>" style="border:1px solid green;" cellpadding="5" cellspacing="5">
				<display:column property="id"/>
				
				<display:column property="name" />
				
				<display:column property="description" />
				
				<display:column title="Organizer">
					<a href="javascript:setOrgFilter('${eventList.organizer}')"><c:out value="${eventList.organizer}" /></a>
				</display:column>
				
				<display:column title="Actions">
					<sf:form method="delete" action="http://localhost:8080/MavenJGA/api/event/">
					    <input type="hidden" name="eventId" value="<c:out value="${eventList.id}" />"/>
					    <input type="submit" value="Delete"/>
					</sf:form>
				</display:column>
			</display:table>
			
			<br/><hr/><br/>
						
		</div>
	</div>
</body>
</html>